<template>
  <div class="dialog-container">
    <div class="dialog-content">
      <div v-if="videoUrl" class="img-box">
        <video width="100%" height="100%">
          <source :src="videoUrl" type="video/mp4" />
        </video>
        <div v-if="status === 'success'" class="icon-success">
          <i class="el-icon-check"></i>
        </div>
        <div v-if="status === 'success'" class="icon-delete">
          <i class="el-icon-delete" @click.stop.prevent="handleDelete()"></i>
        </div>
      </div>
      <el-upload v-else ref="upload" :show-file-list="false" :limit="limit" :accept="accept" action="" name="video" :before-upload="handleBeforeUpload" :on-success="handleSuccess" :on-error="handleError" :on-progress="handleProgress" :http-request="handleUpload" list-type="picture-card">
        <div v-if="status === 'uploading'" class="icon-loading">
          <i class="el-icon-loading"></i>
          <p class="text">上传中...</p>
        </div>
        <div class="error" v-if="status === 'error'">
          <i class="el-icon-refresh-right"></i>
          <p class="text">上传失败<br />点击重试</p>
        </div>
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>
    </div>
    <div class="text-tip">支持上传mp4格式视频,最大不超过10MB</div>
  </div>
</template>

<script>
import { upyunUpload } from '@/utils/upyun'

export default {
  name: 'VideoUpload',
  data() {
    return {
      limit: 1,
      accept: ' video/mp4',
      videoUrl: '',
      status: '',
    }
  },
  watch: {
    videoUrl(value) {
      if (this.status === 'success' || this.status === 'ready') {
        this.$emit('change', value)
      }
    },
  },
  mounted() {},
  methods: {
    setValue(value) {
      this.videoUrl = value
      this.status = 'success'
    },
    // 上传前
    handleBeforeUpload(file) {
      let isRightSize = file.size / 1024 / 1024 < 10
      if (!isRightSize) {
        this.$message.error('文件大小超过 10MB')
      }
      return isRightSize
    },
    // 上传中
    handleProgress(event, file, fileList) {},
    // 上传成功
    handleSuccess(response, file, fileList) {},
    handleError() {
      this.status = 'error'
    },
    // 删除
    handleDelete() {
      this.status = 'ready'
      this.videoUrl = ''
    },
    // 重置
    reset() {
      this.videoUrl = ''
      this.status = 'ready'
    },
    // 自定义上传
    handleUpload(file) {
      this.status = 'uploading'
      upyunUpload({ file: file.file, watermark: false, info_type: 'video' })
        .then((res) => {
          if (res) {
            this.videoUrl = res
            this.status = 'success'
          }
        })
        .catch(() => {
          this.status = 'error'
        })
    },
  },
}
</script>

<style scoped lang="scss">
.img-box {
  width: 80px;
  height: 80px;
  overflow: hidden;
  background-color: #fff;
  border: 1px solid #c0ccda;
  border-radius: 6px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0 8px 8px 0;
  position: relative;
  font-size: 12px;
  color: #ffffff;
  video {
    width: 100%;
    height: 100%;
    user-select: none;
  }
  .icon-success {
    position: absolute;
    right: -15px;
    top: -6px;
    width: 40px;
    height: 24px;
    background: #13ce66;
    text-align: center;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-box-shadow: 0 0 1pc 1px rgba(0, 0, 0, 0.2);
    box-shadow: 0 0 1pc 1px rgba(0, 0, 0, 0.2);
    i {
      margin-top: 11px;
      -webkit-transform: rotate(-45deg);
      transform: rotate(-45deg);
    }
  }
  .icon-delete {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, 0.5);
    font-size: 20px;
    .text {
      font-size: 12px;
    }
  }

  .icon-delete {
    display: none;
    i {
      cursor: pointer;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
  }
  &:hover {
    .icon-delete {
      display: flex;
    }
  }
}
.icon-loading {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.5);
  font-size: 20px;
  line-height: 1;
  color: #ffffff;
  .text {
    font-size: 12px;
  }
}
.icon-loading i {
  color: #ffffff;
  margin-bottom: 10px;
  font-size: 20px;
}
.error {
  font-size: 12px;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  line-height: 1;
  i {
    font-size: 20px;
    margin-bottom: 6px;
  }
}

::v-deep .el-upload {
  margin: 0 8px 8px 0;
  width: 80px;
  height: 80px;
  position: relative;
}
::v-deep .el-upload--picture-card {
  line-height: 90px;
}
.avatar-uploader-icon {
  width: 80px;
}
</style>
